<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mtime</title>
	</head>
	<body>
		<div class="page">
			<div class="nav-bar flex-row">
				<div class="logo">
					Mtime
				</div>
				<div class="nav-item">首页</div>
				<div class="nav-item actived">
					电影
				</div>
				<div class="nav-item">原创</div>
				<div class="nav-item">榜单</div>
				<div class="nav-item">社区</div>
				<div class="nav-item">视频</div>
			</div>
			<div class="color-background"></div>
			<div class="search-box">
				<div class="search-content flex-row">
					<div class="all-button">全部</div>
					<div class="iconfont icon-xia"></div>
					<div class="split-v"></div>
					<input class="keyword" type="text" placeholder="搜索电影、影人、文章、用户、家族" />
					<div class="iconfont icon-search"></div>
				</div>
			</div>
			<div class="page-content flex-column">

				<div class="content-menu flex-row">
					<div class="menu-item actived">影视</div>
					<div class="menu-item">影人</div>
					<div class="menu-item">内容</div>
					<div class="menu-item">用户</div>
					<div class="menu-item">家族</div>
				</div>
				<div class="selected-box page-box flex-row">
					<div class="box-label">
						已选择：
					</div>
					<div class="selected-items flex-row">
						<div class="selected-item">
							剧情
							<div class="iconfont icon-delete"></div>
						</div>
						<div class="selected-item">
							2021年
							<div class="iconfont icon-delete"></div>
						</div>
					</div>
				</div>
				<div class="split-line"></div>
				<div class="types-box page-box flex-row">
					<div class="box-label">
						类型：
					</div>
					<div class="type-items flex-row">
						<div class="type-item actived">剧情</div>
						<div class="type-item">喜剧</div>
						<div class="type-item">短片</div>
						<div class="type-item">爱情</div>
						<div class="type-item">纪录片</div>
						<div class="type-item">动作</div>
						<div class="type-item">惊悚</div>
						<div class="type-item">恐怖</div>
						<div class="type-item">动画</div>
						<div class="type-item">犯罪</div>
						<div class="type-item">冒险</div>
						<div class="type-item">家庭</div>
						<div class="type-item">悬疑</div>
						<div class="type-item">奇幻</div>
						<div class="type-item">科幻</div>
						<div class="type-item">战争</div>
						<div class="type-item">传记</div>
						<div class="type-item">音乐</div>
						<div class="type-item">历史</div>
						<div class="type-item">歌舞</div>
						<div class="type-item">西部</div>
						<div class="type-item">运动</div>
						<div class="type-item">古装</div>
						<div class="type-item">武侠</div>
						<div class="type-item">戏曲</div>
						<div class="type-item">黑色</div>
						<div class="type-item">电影</div>
						<div class="type-item">儿童</div>
						<div class="type-item">新闻</div>
						<div class="type-item">真人秀</div>
						<div class="type-item">舞台</div>
						<div class="type-item">艺术</div>
						<div class="type-item">成人</div>
						<div class="type-item">脱口秀</div>
						<div class="type-item">游戏秀</div>
						<div class="type-item">情色</div>
						<div class="type-item">文艺</div>
						<div class="type-item">同性</div>
						<div class="type-item">青春</div>
						<div class="type-item">灾难</div>
						<div class="type-item">女性</div>
						<div class="type-item">励志</div>
						<div class="type-item">微电影</div>
					</div>
				</div>
				<div class="split-line"></div>
				<div class="years-box page-box flex-row">
					<div class="box-label">
						年代：
					</div>
					<select class="year-select">
						<option class="year-item">2021年</option>
						<option class="year-item">2020年</option>
						<option class="year-item">2019年</option>
						<option class="year-item">2018年</option>
						<option class="year-item">2017年</option>
						<option class="year-item">2016年</option>
						<option class="year-item">2015年</option>
						<option class="year-item">2014年</option>
						<option class="year-item">2013年</option>
					</select>
				</div>
				<div class="split-line"></div>
				<div class="page-box total-text flex-row">
					<div class="box-label">相关影视：</div>
					<div class="number">1,777</div>个
				</div>
				<div class="movie-box page-box flex-column">
					<div class="movie-item">
						<div class="movie-ratio-box">
							<div class="ratio-label">总评分</div>
							<div class="ratio-value">8.5</div>
						</div>
						<div class="movie-info-box">
							<div class="movie-title">放牛班的春天 Les Choristes （2004）</div>
							<div class="movie-info">
								<div class="movie-image">
									<img src="http://img5.mtime.cn/mt/2017/06/27/101650.19008187_1280X720X2.jpg" />
								</div>
								<div class="movie-detail">
									<div class="line-text">96分钟 - 类型： 剧情 / 音乐</div>
									<div class="line-text">导演： 克里斯托夫·巴拉蒂</div>
									<div class="line-text">主演： 杰拉尔·朱诺尚-巴堤·莫里耶</div>
									<div class="movie-button">查看详情</div>
								</div>
							</div>
						</div>
					</div>

					<div class="movie-item">
						<div class="movie-ratio-box">
							<div class="ratio-label">总评分</div>
							<div class="ratio-value">8.5</div>
						</div>
						<div class="movie-info-box">
							<div class="movie-title">放牛班的春天 Les Choristes （2004）</div>
							<div class="movie-info">
								<div class="movie-image">
									<img src="http://img5.mtime.cn/mt/2017/06/27/101650.19008187_1280X720X2.jpg" />
								</div>
								<div class="movie-detail">
									<div class="line-text">96分钟 - 类型： 剧情 / 音乐</div>
									<div class="line-text">导演： 克里斯托夫·巴拉蒂</div>
									<div class="line-text">主演： 杰拉尔·朱诺尚-巴堤·莫里耶</div>
									<div class="movie-button">查看详情</div>
								</div>
							</div>
						</div>
					</div>

					<div class="movie-item">
						<div class="movie-ratio-box">
							<div class="ratio-label">总评分</div>
							<div class="ratio-value">8.5</div>
						</div>
						<div class="movie-info-box">
							<div class="movie-title">放牛班的春天 Les Choristes （2004）</div>
							<div class="movie-info">
								<div class="movie-image">
									<img src="http://img5.mtime.cn/mt/2017/06/27/101650.19008187_1280X720X2.jpg" />
								</div>
								<div class="movie-detail">
									<div class="line-text">96分钟 - 类型： 剧情 / 音乐</div>
									<div class="line-text">导演： 克里斯托夫·巴拉蒂</div>
									<div class="line-text">主演： 杰拉尔·朱诺尚-巴堤·莫里耶</div>
									<div class="movie-button">查看详情</div>
								</div>
							</div>
						</div>
					</div>

					<div class="movie-item">
						<div class="movie-ratio-box">
							<div class="ratio-label">总评分</div>
							<div class="ratio-value">8.5</div>
						</div>
						<div class="movie-info-box">
							<div class="movie-title">放牛班的春天 Les Choristes （2004）</div>
							<div class="movie-info">
								<div class="movie-image">
									<img src="http://img5.mtime.cn/mt/2017/06/27/101650.19008187_1280X720X2.jpg" />
								</div>
								<div class="movie-detail">
									<div class="line-text">96分钟 - 类型： 剧情 / 音乐</div>
									<div class="line-text">导演： 克里斯托夫·巴拉蒂</div>
									<div class="line-text">主演： 杰拉尔·朱诺尚-巴堤·莫里耶</div>
									<div class="movie-button">查看详情</div>
								</div>
							</div>
						</div>
					</div>

					<div class="movie-item">
						<div class="movie-ratio-box">
							<div class="ratio-label">总评分</div>
							<div class="ratio-value">8.5</div>
						</div>
						<div class="movie-info-box">
							<div class="movie-title">放牛班的春天 Les Choristes （2004）</div>
							<div class="movie-info">
								<div class="movie-image">
									<img src="http://img5.mtime.cn/mt/2017/06/27/101650.19008187_1280X720X2.jpg" />
								</div>
								<div class="movie-detail">
									<div class="line-text">96分钟 - 类型： 剧情 / 音乐</div>
									<div class="line-text">导演： 克里斯托夫·巴拉蒂</div>
									<div class="line-text">主演： 杰拉尔·朱诺尚-巴堤·莫里耶</div>
									<div class="movie-button">查看详情</div>
								</div>
							</div>
						</div>
					</div>

					<div class="movie-item">
						<div class="movie-ratio-box">
							<div class="ratio-label">总评分</div>
							<div class="ratio-value">8.5</div>
						</div>
						<div class="movie-info-box">
							<div class="movie-title">放牛班的春天 Les Choristes （2004）</div>
							<div class="movie-info">
								<div class="movie-image">
									<img src="http://img5.mtime.cn/mt/2017/06/27/101650.19008187_1280X720X2.jpg" />
								</div>
								<div class="movie-detail">
									<div class="line-text">96分钟 - 类型： 剧情 / 音乐</div>
									<div class="line-text">导演： 克里斯托夫·巴拉蒂</div>
									<div class="line-text">主演： 杰拉尔·朱诺尚-巴堤·莫里耶</div>
									<div class="movie-button">查看详情</div>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="page-box flex-row" id="pagingBox">
					<div class="last-button actived">&lt;</div>
					<div class="number-button actived">1</div>
					<div class="number-button">2</div>
					<div class="number-button">3</div>
					<div class="number-button">4</div>
					<div class="number-button">5</div>
					<div class="number-button">6</div>
					<div class="number-button">...</div>
					<div class="number-button">12</div>
					<div class="next-button">&gt;</div>
				</div>
			</div>
		</div>
	</body>
	<style>
		@import url("//at.alicdn.com/t/font_2863451_npexvzpdos.css");

		.flex-row {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.flex-column {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		body {
			padding: 0;
			margin: 0;
		}

		.page {
			width: 100%;
			padding-top: 60px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.nav-bar {
			width: 100%;
			background-color: #1e2736;
			height: 60px;
			color: rgba(200, 200, 200, 1);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
		}

		.nav-bar .logo {
			font-size: 200%;
			font-weight: bold;
			margin-left: 10%;
			margin-right: 60px;
			color: #fff;
		}

		.nav-item {
			width: 80px;
			position: relative;
			font-size: 16px;
			cursor: pointer;
		}

		.nav-item.actived {
			color: #fff;
			font-weight: 500;
		}

		.nav-item.actived:after {
			content: '';
			width: 0;
			height: 0;
			border: 6px solid transparent;
			border-bottom-color: #fff;
			position: absolute;
			bottom: -20px;
			left: 8px;
		}

		.color-background {
			position: absolute;
			top: 60px;
			left: 0;
			width: 100%;
			background-color: #127bab;
			height: 300px;
		}

		.page-content {
			width: 80%;
			background-color: #fff;
			overflow-y: auto;
			z-index: 5;
			margin-top: 100px;
			position: relative;
			padding-top: 60px;
		}

		.search-box {
			width: 50%;
			height: 60px;
			margin: 0 auto;
			background-color: #127bab;
			padding: 10px;
			position: absolute;
			top: 120px;
			left: 25%;
			border-radius: 40px;
			z-index: 8;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.search-box .search-content {
			width: calc(100% - 10px);
			height: 50px;
			border-radius: 25px;
			;
			background-color: #fff;
		}

		.search-box .search-content .all-button {
			margin-left: 20px;
			width: 60px;
			text-align: center;
			color: #33334d;
		}

		.search-box .search-content .icon-xia {
			margin-right: 20px;
		}

		.search-box .search-content .split-v {
			height: 30%;
			border-left: 1px solid rgba(200, 200, 200, 1);
			margin-right: 20px;
		}

		.search-box .search-content .keyword {
			height: calc(100% - 2px);
			border: none;
			flex: 1;
		}

		.keyword:focus {
			outline: none;
		}

		.search-box .search-content .icon-search {
			width: 40px;
			font-size: 150%;
			cursor: pointer;
		}

		.content-menu {
			width: calc(100% - 100px);
			padding: 0 50px;
			border-bottom: 1px solid rgba(200, 200, 200, 0.9);
			margin-bottom: 20px;
		}

		.content-menu .menu-item {
			padding: 10px 20px;
			margin-left: 10px;
			margin-right: 10px;

		}

		.content-menu .menu-item.actived {
			border-bottom: 2px solid #DF4706;
		}

		.page-box {
			margin-left: 50px;
			margin-right: 50px;
			padding: 20px 0;
			border-bottom: 1px dotted rgba(200, 200, 200, 0.5);
			align-items: flex-start;
		}

		.page-box .box-label {
			width: 100px;
			flex-shrink: 0;
			color: #333;
		}

		.selected-items {}

		.selected-item {
			border: 1px solid #0087e2;
			color: #0087e2;
			padding: 5px 10px;
			background-color: #ecf5ff;
			margin-right: 15px;
			border-radius: 4px;
			position: relative;
			padding-right: 30px;
		}

		.selected-item .icon-delete {
			width: 20px;
			height: 20px;
			line-height: 20px;
			position: absolute;
			top: calc((100% - 20px) / 2);
			right: 5px;
			color: #0087e2;
			cursor: pointer;
		}

		.type-items {
			flex-wrap: wrap;
			align-items: flex-start;
		}

		.type-items .type-item {
			margin-right: 10px;
			margin: 0px 25px 25px 0px;
			color: #4e5e73;
		}

		.type-items .type-item.actived {
			color: #20a0da;
		}

		.years-box {
			align-items: center;
		}

		.year-select {
			width: 200px;
			padding: 0 10px;
			height: 40px;
			border-radius: 4px;
			border: 1px solid rgba(200, 200, 200, 0.5);
			cursor: pointer;
		}

		.year-select:focus {
			outline: none;
		}

		.movie-item {
			padding-left: 90px;
			position: relative;
			zoom: 1;
			margin-bottom: 40px;
		}

		.movie-item .movie-ratio-box {
			position: absolute;
			left: 20px;
			top: 33px;
			width: 55px;
			height: 55px;
			text-align: center;
			background: #679c21;
			color: #fff;

		}

		.movie-item .movie-ratio-box .ratio-label {
			padding: 4px 0 0;
			font-weight: 400;
			font-size: 12px;
			display: inline-block;
		}

		.movie-item .movie-ratio-box .ratio-value {
			font-size: 23px;
			font-weight: 700;
			position: absolute;
			left: 10px;
			top: 23px;
			text-align: center;

		}

		.movie-image {
			overflow: hidden;
			display: block;
			float: left;
			margin-top: -15px;
		}

		.movie-image img {
			width: 98px;
			height: 130px;
			vertical-align: top;
			border: 1px solid #c4c4c4;
			cursor: pointer;
		}
		
		.movie-detail{
			float: left;
			width: 450px;
			margin-top: -22px;
			margin-left: 10px;
			font-size: 13px;
			line-height: 10px;
			
		}
		.line-text{
			margin: 18px 0;
			
		}
		
		.movie-title{
			    font-size: 20px;
			    line-height: 24px;
			    font-weight: 400;
			    padding: 30px 0;
			    background: #fff;
		}
		.movie-button{
			
			background: #679c21;
			border-radius: 18px;
			color: #fff;
			width: 124px;
			height: 28px;
			font-size: 14px;
			line-height: 28px;
			overflow: hidden;
			text-align: center;
			float: left;
			letter-spacing: 2px;
			margin-top: 5px;
			margin-left: 5px;
		}
		
		
		
		#pagingBox{
				text-align: center;
			    white-space: nowrap;
			    padding: 2px 5px;
			    color: #303133;
			    font-weight: 700;
				display: flex;
				justify-content: center;
				margin-bottom: 25px;
				
		}
		
		.last-button{
			    padding: 0 4px;
			    font-size: 20px;
			    min-width: 35.5px;
			    height: 28px;
			    line-height: 28px;
			    box-sizing: border-box;
			    text-align: center;
				background-color: #f4f4f5;
				cursor: pointer;
		}
		.last-button.actived{
			cursor: not-allowed;
			color: #c0c4cc;
		}
		
		.number-button{
			    padding: 0 4px;
			    font-size: 13px;
			    min-width: 35.5px;
			    height: 28px;
			    line-height: 28px;
			    box-sizing: border-box;
			    text-align: center;
				background-color: #f4f4f5;
				margin-left: 15px;
				border-radius: 4px;
				cursor: pointer;
		}
		.number-button.actived{
			background-color: #409eff;
			color: #fff;
			
		}
		.next-button{
			    padding: 0 4px;
			    font-size: 20px;
			    min-width: 35.5px;
			    height: 28px;
			    line-height: 28px;
			    box-sizing: border-box;
			    text-align: center;
				background-color: #f4f4f5;
				margin-left: 15px;
		}
		
	</style>
</html>
